<template>
  <view class="question-bank">
    <view class="grid-container">
      <view v-for="(item, index) in displayItems" :key="item.id" class="question-card"
        :class="{ 'expanded': expandedItem === item.id }" @tap="toggleExpand(item.id)">
        <view :class="['card-accent', getTypeColorClass(item.type)]"></view>

        <view class="card-content">
          <!-- Image if available -->
          <view v-if="item.imageUrl" class="card-image-container">
            <image :src="item.imageUrl" mode="aspectFill" class="card-image"></image>
            <view v-if="item.progress !== undefined" class="progress-container">
              <view class="progress-bar" :style="{ width: item.progress + '%' }"></view>
            </view>
          </view>

          <!-- Card header with subject and type -->
          <view class="card-header">
            <view class="subject-container">
              <view class="subject-icon">
                <svg v-if="item.type === 'wrong'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-wrong">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
                <svg v-if="item.type === 'notes'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-notes">
                  <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                  <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                </svg>
                <svg v-if="item.type === 'favorites'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-favorites">
                  <polygon
                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                  </polygon>
                </svg>
                <svg v-if="item.type === 'recent'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-recent">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
                <svg v-if="item.type === 'challenge'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-challenge">
                  <circle cx="12" cy="8" r="7"></circle>
                  <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
                </svg>
                <svg v-if="item.type === 'ai'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class="icon-ai">
                  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                </svg>
              </view>
              <text class="subject-text">{{ item.subject }}</text>
            </view>

            <view v-if="item.aiGenerated" class="ai-badge">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
              </svg>
              <text>AI生成</text>
            </view>
          </view>

          <!-- Card title -->
          <text :class="['card-title', { 'expanded-title': expandedItem === item.id }]">{{ item.title }}</text>

          <!-- Tags and difficulty -->
          <view class="tags-container">
            <view :class="['difficulty-tag', getDifficultyClass(item.difficulty)]">
              {{ item.difficulty === 'easy' ? '简单' : item.difficulty === 'medium' ? '中等' : '困难' }}
            </view>
            <view v-for="(tag, tagIndex) in item.tags.slice(0, 1)" :key="tagIndex" class="content-tag">
              {{ tag }}
            </view>
            <view v-if="item.tags.length > 1" class="content-tag">
              +{{ item.tags.length - 1 }}
            </view>
          </view>

          <!-- Expanded content -->
          <view v-if="expandedItem === item.id" class="expanded-content">
            <text class="description">
              这是一个{{ item.subject }}学科的{{ item.type === 'wrong' ? '错题' :
                item.type === 'notes' ? '笔记' :
                  item.type === 'favorites' ? '收藏' :
                    item.type === 'recent' ? '最近练习' :
                      item.type === 'challenge' ? '挑战题' : 'AI生成内容' }}，难度为{{ item.difficulty === 'easy' ? '简单' :
                item.difficulty === 'medium' ? '中等' : '困难' }}。
            </text>

            <view class="action-buttons">
              <view class="primary-button">开始学习</view>
              <view class="outline-button">添加到计划</view>
              <view class="ghost-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
                  <polyline points="16 6 12 2 8 6"></polyline>
                  <line x1="12" y1="2" x2="12" y2="15"></line>
                </svg>
                <text>分享</text>
              </view>
            </view>
          </view>

          <!-- Card footer -->
          <view class="card-footer">
            <view class="stats-container">
              <view class="stat-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="stat-icon star-icon">
                  <polygon
                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                  </polygon>
                </svg>
                <text>{{ item.likes }}</text>
              </view>
              <view class="stat-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="stat-icon chart-icon">
                  <path d="M3 3v18h18"></path>
                  <path d="M18 17V9"></path>
                  <path d="M13 17V5"></path>
                  <path d="M8 17v-3"></path>
                </svg>
                <text>{{ item.views }}</text>
              </view>
              <view class="stat-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="stat-icon message-icon">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
                <text>{{ item.comments }}</text>
              </view>
            </view>
            <text class="date-text">{{ item.date }}</text>
          </view>

          <!-- Bottom highlight effect -->
          <view class="card-highlight"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const items = ref([
  {
    id: "1",
    type: "wrong",
    title: "数学函数与导数综合题",
    subject: "高等数学",
    difficulty: "hard",
    tags: ["函数", "导数", "极值"],
    imageUrl: "",
    date: "2023-10-15",
    likes: 42,
    views: 128,
    comments: 8,
  },
  {
    id: "2",
    type: "notes",
    title: "大学物理力学知识点总结",
    subject: "大学物理",
    difficulty: "medium",
    tags: ["力学", "牛顿定律"],
	imageUrl: "",
    date: "2023-10-12",
    likes: 18,
    views: 76,
    comments: 3,
  },
  // {
  //   id: "3",
  //   type: "favorites",
  //   title: "英语写作高分技巧",
  //   subject: "英语",
  //   difficulty: "medium",
  //   tags: ["写作", "语法"],
  //   date: "2023-10-10",
  //   likes: 56,
  //   views: 203,
  //   comments: 12,
  // },
  // {
  //   id: "4",
  //   type: "recent",
  //   title: "化学元素周期表规律",
  //   subject: "化学",
  //   difficulty: "medium",
  //   tags: ["元素周期表", "化学性质"],
  //   progress: 75,
  //   date: "2023-10-08",
  //   likes: 23,
  //   views: 89,
  //   comments: 5,
  // },
  // {
  //   id: "5",
  //   type: "challenge",
  //   title: "生物遗传学挑战题",
  //   subject: "生物",
  //   difficulty: "hard",
  //   tags: ["遗传学", "基因"],
  //   // imageUrl: "/static/images/人工智能基础与应用.png",
  //   date: "2023-10-05",
  //   likes: 37,
  //   views: 142,
  //   comments: 9,
  // },
  {
    id: "6",
    type: "ai",
    title: "AI生成的历史知识点总结",
    subject: "历史",
    difficulty: "easy",
    tags: ["中国古代史", "朝代"],
    aiGenerated: true,
    date: "2023-10-03",
    likes: 31,
    views: 118,
    comments: 6,
  },
  {
    id: "7",
    type: "wrong",
    title: "几何证明题错题集",
    subject: "数学",
    difficulty: "hard",
    tags: ["几何", "证明"],
    // imageUrl: "/static/images/计算机导论.png",
    date: "2023-10-01",
    likes: 19,
    views: 84,
    comments: 4,
  },
  {
    id: "8",
    type: "notes",
    title: "政治知识框架笔记",
    subject: "政治",
    difficulty: "medium",
    tags: ["时事政治", "理论"],
    date: "2023-09-28",
    likes: 27,
    views: 103,
    comments: 7,
  },
]);

const expandedItem = ref(null);
const displayItems = computed(() => items.value);

const toggleExpand = (id) => {
  if (expandedItem.value === id) {
    expandedItem.value = null;
  } else {
    expandedItem.value = id;
  }
};

const getTypeColorClass = (type) => {
  switch (type) {
    case "wrong":
      return "wrong-accent";
    case "notes":
      return "notes-accent";
    case "favorites":
      return "favorites-accent";
    case "recent":
      return "recent-accent";
    case "challenge":
      return "challenge-accent";
    case "ai":
      return "ai-accent";
    default:
      return "default-accent";
  }
};

const getDifficultyClass = (difficulty) => {
  switch (difficulty) {
    case "easy":
      return "easy-tag";
    case "medium":
      return "medium-tag";
    case "hard":
      return "hard-tag";
    default:
      return "default-tag";
  }
};
</script>

<style>
.question-bank {
  margin-bottom: 30rpx;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.question-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  transition: transform 0.3s, box-shadow 0.3s;
}

.question-card.expanded {
  grid-column: span 2;
}

.question-card:active {
  transform: scale(0.98);
}

.card-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rpx;
  height: 120rpx;
}

.wrong-accent {
  background: linear-gradient(to bottom, #ef4444, #f97316);
}

.notes-accent {
  background: linear-gradient(to bottom, #3b82f6, #06b6d4);
}

.favorites-accent {
  background: linear-gradient(to bottom, #f59e0b, #eab308);
}

.recent-accent {
  background: linear-gradient(to bottom, #a855f7, #ec4899);
}

.challenge-accent {
  background: linear-gradient(to bottom, #10b981, #14b8a6);
}

.ai-accent {
  background: linear-gradient(to bottom, #2563eb, #4f46e5);
}

.default-accent {
  background: linear-gradient(to bottom, #6b7280, #4b5563);
}

.card-content {
  padding: 24rpx;
  padding-top: 30rpx;
}

.card-image-container {
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 180rpx;
  transition: transform 0.5s;
}

.expanded .card-image {
  height: 300rpx;
}

.question-card:hover .card-image {
  transform: scale(1.1);
}

.progress-container {
  position: relative;
  height: 8rpx;
  background-color: #e5e7eb;
}

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #3b82f6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.subject-container {
  display: flex;
  align-items: center;
}

.subject-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #eff6ff;
  margin-right: 8rpx;
}

.icon-wrong {
  color: #ef4444;
}

.icon-notes {
  color: #3b82f6;
}

.icon-favorites {
  color: #f59e0b;
}

.icon-recent {
  color: #a855f7;
}

.icon-challenge {
  color: #10b981;
}

.icon-ai {
  color: #2563eb;
}

.subject-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #1e40af;
}

.ai-badge {
  display: flex;
  align-items: center;
  background-color: #eff6ff;
  border-radius: 30rpx;
  padding: 4rpx 12rpx;
}

.ai-badge svg {
  color: #2563eb;
  margin-right: 4rpx;
}

.ai-badge text {
  font-size: 20rpx;
  font-weight: 500;
  color: #2563eb;
}

.card-title {
  font-size: 26rpx;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expanded-title {
  font-size: 30rpx;
  -webkit-line-clamp: initial;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.difficulty-tag {
  font-size: 20rpx;
  font-weight: 500;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  color: white;
}

.easy-tag {
  background: linear-gradient(to right, #10b981, #059669);
}

.medium-tag {
  background: linear-gradient(to right, #f59e0b, #d97706);
}

.hard-tag {
  background: linear-gradient(to right, #ef4444, #dc2626);
}

.content-tag {
  font-size: 20rpx;
  font-weight: 500;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background-color: #f0f9ff;
  color: #0369a1;
  border: 1px solid #e0f2fe;
}

.expanded-content {
  margin-top: 20rpx;
}

.description {
  font-size: 26rpx;
  color: #4b5563;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.primary-button {
  font-size: 24rpx;
  font-weight: 500;
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  background-color: #2563eb;
  color: white;
}

.outline-button {
  font-size: 24rpx;
  font-weight: 500;
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  background-color: white;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.ghost-button {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  font-weight: 500;
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  color: #6b7280;
}

.ghost-button svg {
  margin-right: 8rpx;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx;
  background-color: rgba(239, 246, 255, 0.5);
  border-top: 1px solid #eff6ff;
}

.stats-container {
  display: flex;
  gap: 24rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #6b7280;
}

.stat-icon {
  margin-right: 4rpx;
}

.star-icon {
  color: #f59e0b;
}

.chart-icon {
  color: #3b82f6;
}

.message-icon {
  color: #a855f7;
}

.date-text {
  font-size: 22rpx;
  color: #9ca3af;
}

.card-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rpx;
  background: linear-gradient(to right, transparent, #3b82f6, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.question-card:hover .card-highlight {
  opacity: 1;
}
</style>
